<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="19" class="s18">
        <div class="grid-content1 bg-purple-dark" @click="show3 = !show3">
          <span><i :class="show3? 'el-icon-caret-top' : 'el-icon-caret-bottom'"/> {{ show3? '收起筛选' : '展开筛选' }}</span>
        </div>
      </el-col>
      <el-col :span="5" class="s6">
        <div class="grid-content bg-purple-dark">
          <el-button size="small">查询结果</el-button>
          <!-- <el-button size="small">高级检索</el-button> -->
        </div>
      </el-col>
    </el-row>
    <el-collapse-transition>
      <div v-show="show3">
        <el-row :gutter="20" class="queryConditions">
          <!-- 报表月份 -->
          <el-col :span="8">
            <el-row>
              <el-col :span="6"><span>报表月份</span></el-col>
              <el-col :span="15">
                <el-date-picker
                  v-model="dataTime"
                  :picker-options="pickerOptions"
                  :default-time="['00:00:00', '23:59:59']"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"/>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-collapse-transition>

    <div class="title">
      <svg-icon icon-class="dataList" class-name="custom-class"/>
      <p style="display: inline;">数据列表</p>
      <div style="float:right;">
        <el-button size="mini">导出选中</el-button>
        <el-select v-model="row" style="width:100px" placeholder="显示条数" class="sel" clearable>
          <el-option label="10条" value="1"/>
          <el-option label="20条" value="2"/>
          <el-option label="40条" value="3"/>
          <el-option label="100条" value="4"/>
        </el-select>
      </div>
    </div>

    <!-- 表格 -->
    <el-table
      v-loading="logding"
      ref="multipleTable"
      :row-key="getRowKeys"
      :data="tableData"
      style="width: 100%"
      border
      tooltip-effect="dark"
      @selection-change="handleSelectionChange">

      <el-table-column :reserve-selection="false" type="selection" width="50"/>

      <!-- 金牌月报表 -->
      <el-table-column label="金牌月报表">
        <template>
          <span>123</span>
        </template>
      </el-table-column>

      <!-- 生成时间 -->
      <el-table-column label="生成时间">
        <template>
          <span>123</span>
        </template>
      </el-table-column>

      <!-- 文件大小 -->
      <el-table-column label="文件大小">
        <template>
          <span>123</span>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template>
          <el-button>下载</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <div class="pagination">
      <el-pagination
        :page-size="pagesize"
        :total="parseInt(pageno)"
        layout="total, prev, pager, next, jumper"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Exchange',
  filters: {
    // 123
  },
  data() {
    return {
      show3: true, // 显示筛选
      dataTime: '', // 提交时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      row: '', // 下拉显示条数
      logding: false, // 加载
      getRowKeys(row) { // 翻页全选
        return row.orderId
      },
      tableData: [], // 表格数据
      pagesize: 10, // 每页显示20条
      pageno: 1 // 显示第一页
    }
  },
  created() {
    // 132
  },
  methods: {
    // 多选
    handleSelectionChange(rows) {
      this.multipleSelection = rows
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  background-color: #fff;
  padding: 30px 20px 20px 20px;
}
.grid-content {
  min-height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
  cursor: pointer;
}
.grid-content1 {
  min-height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
  cursor: pointer;
  text-align: right;
  padding-right: 20px;
}
.bg-purple-dark {
  background: rgba(243, 243, 243, 1);
}
.s18 {
  padding-right: 0!important;
}
.s6 {
  padding-left: 0!important;
}
.queryConditions span {
  font-size: 16px;
  line-height: 40px;
}
.title {
  text-align: left;
  height: 50px;
  line-height: 50px;
  padding-right: 20px;
  padding-left: 20px;
  margin-top: 40px;
  background: rgba(243, 243, 243, 1);
}
.dashboard-container >>> .sel .el-input__inner {
  height: 24px!important;
  line-height: 24px!important;
  font-size: 13px!important;
}
.pagination {
  margin: 30px auto;
  text-align: center;
}
</style>
